@charset "utf-8";
@import "reset";
@import "iconfont";
//把px转化为rem的函数
@function r($px){
    @return $px/40*1rem;
}
@mixin aImg{
    overflow: hidden;
    position: relative;
    img{
        position: absolute;
        width: 100%;
        top:-9999px;
        bottom:-9999px;
        left:-9999px;
        right:-9999px;
        margin: auto;
    }
}
.show_web{
    overflow: hidden;
    width: 100%;
    height: 100%;
//  导航栏
    .show_nav{
        width: 100%;
        height: 30px;
        background: #222;
        border-bottom: 1px solid #222;
        z-index: 9999;
        position: fixed;
        .BG_bg{
            background: #222222;
        }
        .nav_fluid{
            width: 70%;
            height: 30px;   
            .nav_log{
                width: 150px;
                margin-top: -5px;
                img{
                     width: 100%;
                }
            }
            .nav_hone{
                ul{
                    .active{
                        a{
                            background: #111;
                            color: white;
                        }
                    }
                    li{
                        a{
                            font-size: r(16);
                        }
                        a:hover{
                            color: #ccc;
                        }
                        .toggle_bg{
                            background: #222222;
                            li a{
                                background: #222;
                                color: #eee;
                                &:hover{
                                    background: #ccc;
                                    color: #666;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
//  主体部分
    .show_cent{
        width: 70%;
        margin: 0 auto;  
        margin-top: 80px;
        h1{
            color: #ff6b08;
            margin-top: 80px;
        }
//      顶部新闻图
        .cent_top{
            height: r(180);
            width: 100%;
            margin-top: r(100);
            display: flex;
            justify-content:space-between;
            &>div{
                display: inline-block;
                width: r(310);
                height: r(178);
                border-radius:r(5) ;
                border: 1px solid #eeeeee;
                overflow: hidden;
                position: relative;
                &>div{
                    width: r(310);
                    height: r(178);
                    @include aImg;
                    &:hover{
                         background: #fff;
                         opacity: .8;
                     }
                }
                .top_font{
                    background: #666666;
                    height: r(38);
                    width: r(310);
                    position: absolute;
                    bottom: 0;
                    right: 0;
                    text-align: center;
                    line-height: r(38);
                    margin-left: r(10);
                    opacity: .8;
                    &:hover{
                        background: #666666;
                    }
                    a{
                        font-size: r(15);
                        color: white;
                        &:hover{
                            color: skyblue;
                        }
                    }
                }
            }
            div:nth-child(2){
                &>div{
                    width: r(310);
                    height: r(140);
                    @include aImg;
                }
                 &>div:nth-child(2){
                    background: #666666;
                    height: r(38);
                    width: r(310);
                    text-align: center;
                    line-height: r(38);
                    margin: 0;
                    a{
                        font-size: r(15);
                        color: white;
                        &:hover{
                            color: skyblue;
                            background: #666666;
                        }
                    }
                }
            }
        } 
//      中部详细新闻
        .cent_hbb{
            width: 100%;
            margin-top: r(50);
            margin-bottom: r(50);
            padding-bottom: r(50);
            border-bottom: 1px dashed #d4d4d4;
            .hbb_lei{
                margin-top: r(30);
                .lei_left,.lei_right{
                    display: inline-block;
                }
                 .lei_left{
                    width: r(222);
                    height: r(136);
                    border-radius: 5px;
                    border: 1px solid #dddddd;
                    margin-right: r(25);
                    vertical-align: top;
                    .left_pic{
                        width: r(218);
                        height: r(131);
                        img{
                            padding-top: r(2);
                            padding-left: r(2);
                        }
                        @include aImg;
                        &:hover{
                                 background: #fff;
                                 opacity: .8;
                                
                            }
                    }
                }
                .lei_right{
                    overflow: hidden;
                    height: r(185);
                    width: r(733);
                    &>div:nth-child(1){
                        h4{
                            color: #666666;
                            font-size: r(20);
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap; 
                            &:hover{
                                color: #ff6b08;
                            }
                        }
                         p{
                            color: #2a2a2a;
                            font-size: r(14);
                            margin:r(15) 0;
                        }
                    }
                    &>div:nth-child(2){
                        p{
                            color: #2a2a2a;
                            font-size: r(14);
                            line-height: r(25);
                        }
                         &>div{
                            border-radius: r(30);
                            height: r(30);
                            width: r(100);
                            border: 1px solid #FF6B08;
                            line-height: r(26);
                            text-align: center;
                           float: right;
                           margin-top: r(10);
                            a{
                                color: #ff6b08;
                                font-size: r(14);
                            }
                            &:hover{
                                 background: #ff6b08;
                                 a{
                                     color: white;
                                 }
                            }
                        }
                    }
                   
                }
            }
        }
//      尾部换页
      .cent_mextpege{
            width:100%;
            text-align: center;
            margin-bottom: r(50);
            overflow: hidden;
            div{
                display: inline-block;
                font-size: 0;
            }
            &>div:nth-child(1){
                width: 205px;
                height: 25px;
                border-radius: 5px;
                border: 1px solid #dddddd;
                ul{
                    li{
                        display: inline-block;
                        text-align: center;
                        line-height: 25px;
                        font-size: 0;
                        a{
                            font-size: 12px;
                             color: #2a2a2a;
                        }
                    }
                    li:nth-child(1){
                        width: 35px;
                        height: 24px;
                    }
                    li:nth-child(2){
                        width: 40px;
                        height: 25px;
                        border-left: 1px solid #DDDDDD;
                    }
                    li:nth-child(3),li:nth-child(4),li:nth-child(5),li:nth-child(6){
                        width: 30px;
                        height: 25px;
                        border-left: 1px solid #DDDDDD;
                    }
                    li:nth-child(3){
                        background: #e34637;
                        color: white;
                    }
                    li:hover{
                        background: #ddd;
                        color: #2a2a2a;
                    }
                }
            }
            &>div:nth-child(2){
                border-radius: 0 5px 5px 0;
                border: 1px solid #DDDDDD;
                width: 40px;
                height: 25px;
                vertical-align: top;
                text-align: center;
                line-height: 25px;
                margin-left: -6px;
                a{
                    font-size: 12px;
                     color: #2a2a2a;
                }
                &:hover{
                        background: #ddd;
                        color: #2a2a2a;
                    }
            }
        }
    }
//   版权
    .show_copy{
        width: 100%;
        height:100px;
        background: #3b3b3b;
        overflow:hidden ;
        position: relative;
        .copy_left{
            width: 70%;
            margin: 0 auto;
            margin-top: r(20);
            .left_son1{
                ul{
                    li{
                        display: inline-block;
                        margin-right: r(15);
                        a{
                            font-size: r(16);
                            color: #a1a3ab;
                            &:hover{
                                color: white;
                            }
                        }
                    }
                }
            }
            .left_son2{
                margin-top: r(15);
                p{
                    font-size: r(16);
                    color: #a1a3ab;
                }
            }
        }
        .copy_right{
            position: absolute;
            right: 18%;
            top: 30%;
            ul{
                li{
                    margin-left: r(10);
                    display: inline-block;
                    div{
                        width: r(40);
                        height: r(40);
                        border-radius:50% ;
                        background: #d8d8e0;
                        line-height:r(40);
                        text-align: center;
                        i{
                            color: #4c4c52;
                            font-size: r(25);
                            display: block;
                            cursor: pointer;
                        }
                    }
                }
            }
        }
    }
}
//媒体查询
@media only screen and (max-width:768px){
    .show_web{
        width: 100%;
        .show_nav{
            width: 100%;
            
            .nav_fluid{
                width: 100%;
                .navbar-toggle {
                    padding: 5px 5px;
                }
                .nav_log{
                    img{
                        width: 70%;
                    }
                }
            }
        }
        .show_cent{
            width: 100%;
            .cent_top{
                width: 80%;
                &>div{
                     &>div:nth-child(1){
                       width: 100%;
                       img{
                           height: 100%;    
                       }
                    }
                    &>div:nth-child(2){
                        display: none;
                    }
                }
            }
            .cent_hbb{
                width: 100%;
                .hbb_lei{
                    width: 100%;
                    .lei_left{
                        .left_pic{
                            width:100%;
                        }
                    }
                    .lei_right{
                        &>div:nth-child(2){
                            display: none;
                        }
                    }
                }
            }
            .cent_mextpege{
                min-width: 200px;
            }
        }

        .show_copy{
            width: 100%;
            .copy_right{
                display: none;
            }
        }
    }
}
@media only screen and (max-width:991px){
    .show_web{
        width: 100%;
        .show_nav{
            width: 100%;
            .nav_fluid{
                width: 80%;
                font-size: r(14);
            }
        }
        .show_cent{
            width: 80%;
            margin-top: r(100);
            h1{
                font-size: r(40);
            }
            .cent_top{
                width: 90%;
            }
            .cent_hbb{
                width: 100%;
            }
        }
    }
}
